<template>
  <div>
    <van-row>
      <!--左边导航-->
      <van-col span="6" id="box"
        ><van-sidebar v-model="activeKey">
          <van-sidebar-item
            id="left"
            v-for="(item, index) in list"
            :key="item.id"
            :title="item.title"
            @click="change(index)"
          /> </van-sidebar
      ></van-col>
      <!--右边导航-->
      <van-col span="18" class="right" @scroll.native="scrl">
        <div v-for="item in list" :key="item.id">
          <h2>{{item.title}}</h2>
          <van-card
            v-for="i in item.children"
            :key="i.cid"
            :price="i.price"
            :title="i.title"
            :thumb="i.img"
            @click="xq(i)"
          >
            <!--加入购物车按钮-->
            <template #footer>
              <van-icon
                name="shopping-cart-o"
                size="30px"           
                color="red"
                @click.stop="add($event,i)"
              />
            </template>
          </van-card>
        </div>
      </van-col>
      <!-- 小球动画 -->
      <ball :x="x" :y="y" :flag="flag" @changeflag="changeflag"></ball>
      <!-- 弹出框 -->
      <van-popup v-model="show" round position="bottom">
        <van-card
          v-for="i in $store.state.shoplist"
          :key="i.cid"
          :price="i.price"
          :title="i.title"
          :thumb="i.img"
        >
          <template #tags>
            <van-tag plain type="danger">总计￥{{ i.num * i.price }}</van-tag>
          </template>
          <template #footer>
            <van-stepper
              theme="round"
              button-size="22"
              disable-input
                v-model="i.num"
              @plus="jia(i.cid)"
              @minus="jian(i.cid)"
            />
          </template>
        </van-card>
        <!-- 清空购物车按钮 -->
        <van-button type="primary" @click="clear" class="qk"
          >清空购物车</van-button
        >
      </van-popup>
      <van-submit-bar :price="$store.getters.sum*100" button-text="提交订单">
        <van-icon
          name="shopping-cart-o"
          size="30px"
          color="red"
          @click="show = !show"
        />
      </van-submit-bar>
    </van-row>
  </div>
</template>
<script>
import { Dialog } from "vant";
import ball from "../components/ball.vue";
export default {
  components: {
    ball,
  },
  data() {
    return {
      list: [],
      activeKey: 0,
      heights: [],
      flag: false,
      x: 0,
      y: 0,
      show: false,
    };
  },
  mounted() {
    this.$axios.get("/aaa.json").then((res) => {
      this.list = res.data.data;
      this.$nextTick(() => {
        var tags = document.querySelectorAll(".right>div");
        for (var i = 1; i < tags.length; i++) {
          this.heights.push(tags[i].offsetTop);
        }
      });
    });
  },
  methods: {
    change(index) {
      document.querySelector(".right").scrollTop = this.heights[index - 1];
      //   点击左侧菜单 ，让右侧的滚动条发生变化
    },
    scrl() {
      //右侧滚动时触发
      let scrl = document.querySelector(".right").scrollTop;
      this.heights.forEach((item, index) => {
        if (scrl == 0) {
          this.activeKey = 0;
        }
        if (index > 0) {
          if (
            scrl > this.heights[index - 1] - document.body.offsetHeight &&
            scrl <= item
          ) {
            this.activeKey = index;
          }
        }
      });
    },
    // 加入购物车
    add(e, i) {
      this.flag = true;
      let rect = e.target.getBoundingClientRect(); //拿到点击的加购物车的位置,这里不直接取值（我是用的绝对定位，当然可以直接取值）的原因是，商品列表中每个加号的位置是不固定的，如果上下滑动了，这个位置就不确定
      this.x = rect.left - 70; // 需要偏移的x向距离
      this.y = -(window.innerHeight - rect.top - 65); // 需要偏移的y向距离
      this.$store.commit("add", i);
    },
    // 小球运动
    changeflag() {
      this.flag = false;
    },
    // 加
    jia(id) {
      this.$store.commit("jia", id);
    },
    // 减
    jian(id) {
      this.$store.commit("jian", id);
    },
    // 清空购物车
    clear() {
      Dialog.confirm({
        message: "确定清空购物车吗？",
      })
        .then(() => {
          this.$store.commit("clear");
        })
        .catch(() => {});
    },
    // 查看详情
    xq(i) {
      this.$router.push({
        path: "/xiangqing",
        query: { title: i.title, price: i.price },
      });
    },
  },
};
</script>
<style  scoped>
#left {
  height: 40px;
  line-height: 6px;
}
#box {
  position: fixed;
  left: 0px;
  top: 0px;
}
.right {
  margin-left: 80px;
  height: 1000px;
  overflow: scroll;
}
.van-submit-bar {
  z-index: 9999;
}
.qk {
  margin: 20px;
  margin-bottom: 60px;
}
h2{
  margin-left: 10px;
}
</style>